<div>
  <div id="divmain">
    <!-- 表格区 -->
    <div class="col-sm-12">
      <data-table (changepage)="changepage($event)" [title]="title" [arr]="arrbutes" [addButton]="btnAdd" (addOpen)="addOpen($event,addModal)"
        [editButton]="btnEdit" [deleteButton]="btnDelete" (deletesEmit)="deleteDatas($event)" [importButton]="btnImport" (importEmit)="import($event)"
        [exportButton]="btnExport" (exportEmit)="export($event)" [buttonList]="btnList" (operat)="operatData($event,editModal)"
        [total]="total" [data]="data" [page]="page" [sizeList]="sizeList" [paging]="paging" [pageSize]="pageSize" [buttonstyle]="btnstyle">
      </data-table>
    </div>
    <!-- <button id="login" type="submit" (click)="doLogin()">保存</button> -->
  </div>

  <!-- 提示框，隐藏IP地址 -->
  <p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true">
    <p style="text-align:center">
      {{messages}}
    </p>

    <p-footer>
      <button type="button" pButton icon="fa-check" (click)="display=false" label="确定"></button>
    </p-footer>
  </p-dialog>

  <!--删除提示框-->
  <p-confirmDialog header="提示" icon="fa fa-question-circle" width="425"></p-confirmDialog>

  <!-- 添加风景-->
  <div #addModal class="modal-dialog" (click)="draggable()" style="width:750px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close(addModal)">×
        </button>
        <h4 class="modal-title">
          添加风景
        </h4>
      </div>
      <div class="modal-body">
        <form role="form" class="form-horizontal" #addform="ngForm">
          <!-- 拖拽图片 -->
          <!-- [nzMultiple]="true" [nzLimit]="2" nzAction="https://jsonplaceholder.typicode.com/posts/"-->
          <div class="form-group">
            <!-- <nz-upload nzType="drag" nzAction="https://jsonplaceholder.typicode.com/posts/"  (nzChange)="handleChange($event)">
              <p class="ant-upload-drag-icon">
                <i class="anticon anticon-inbox"></i>
              </p>
              <p class="ant-upload-text">点击或拖动文件上传</p>
              <p class="ant-upload-hint">支持单个或批量上传</p>
            </nz-upload> -->
            <!-- <div class="col-sm-6 form-inline">拖拽图片-下一期做</div> -->

          </div>
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">风景：</label>
              <label>
                <input type="text" #name="ngModel" id="name" class="form-control" onfocus="this.select()" placeholder="请输入景点名" [(ngModel)]="landScape.name" name="name"
                  required>
              </label>
            </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">描述：</label>
              <label>
                <input type="text" #description="ngModel" id="description" class="form-control" onfocus="this.select()" placeholder="请输入景点描述" [(ngModel)]="landScape.description"
                  name="description" required>
              </label>
            </div>
          </div>
          <!-- 地址 -->
          <div class="form-group">
            <div class="col-sm-12 form-inline">
              <label class="control-label">地址：</label>
              <label class="form-inline">

                <!-- <select class="form-control" [(ngModel)]="landScape.provinceId" (change)="changeProvince($event.target.value)" style="float:left"
                  name="province">
                  <option *ngFor="let option of provinceOptions" [value]="option.id">{{option.name}}</option>
                </select>

                <select class="form-control" [(ngModel)]="landScape.cityId" (change)="changeCity($event.target.value)" style="float:left"
                  name="city">
                  <option *ngFor="let option of cityOptions" [value]="option.id">{{option.name}}</option>
                </select>
                <select class="form-control" [(ngModel)]="landScape.countyOrDistrictId" style="float:left" name="countyOrDistrict">
                  <option *ngFor="let option of countyOrDistrictOptions" [value]="option.id">{{option.name}}</option>
                </select> -->
                <input type="text" class="form-control" style="width: 580px;" [(ngModel)]="landScape.address" placeholder="请输入详细地址" name="address">
              </label>
            </div>
          </div>
          <!-- 风景描述 -->
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">备注：</label>
              <label>
                <input type="text" #remark="ngModel" id="remark" class="form-control" placeholder="请输入备注" onfocus="this.select()" [(ngModel)]="landScape.remark"
                  name="remark" required>
              </label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <!-- [disabled]="!addform.form.valid" -->
        <button type="button" class="btn btn-primary" (click)="doAdd(addModal)">
          添加
        </button>
        <button type="button" class="btn btn-default" (click)="close(addModal)">
          取消
        </button>
      </div>
    </div>
  </div>

  <!-- 修改风景 -->
  <div #editModal class="modal-dialog" (click)="draggable()" style="width:750px">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <button type="button" class="close" (click)="close(editModal)">×
          </button>
          <h4 class="modal-title">
            修改风景
          </h4>
        </div>
        <div class="modal-body">
          <form role="form" class="form-horizontal" #editform="ngForm">
            <!-- 图片上传回显 -->
            <!-- <div class="form-group">
              <div class="col-sm-6 form-inline">
                图片上传回显
              </div>
            </div> -->
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">风景：</label>
                <label>
                  <input type="text" #name="ngModel" id="name" class="form-control" onfocus="this.select()" placeholder="请输入景点名" [(ngModel)]="landScape.name" name="name"
                    required>
                </label>
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">描述：</label>
                <label>
                  <input type="text" #description="ngModel" id="description" class="form-control" onfocus="this.select()" placeholder="请输入景点描述" [(ngModel)]="landScape.description"
                    name="description" required>
                </label>
              </div>
            </div>
            <!-- 地址 -->
            <div class="form-group">
              <div class="col-sm-12 form-inline">
                <label class="control-label">地址：</label>
                <label class="form-inline">

                  <!-- <select class="form-control" [(ngModel)]="personInfo.provinceId" (change)="changeProvince($event.target.value)" style="float:left"
                    name="province">
                    <option *ngFor="let option of provinceOptions" [value]="option.id">{{option.name}}</option>
                  </select>

                  <select class="form-control" [(ngModel)]="personInfo.cityId" (change)="changeCity($event.target.value)" style="float:left"
                    name="city">
                    <option *ngFor="let option of cityOptions" [value]="option.id">{{option.name}}</option>
                  </select>
                  <select class="form-control" [(ngModel)]="personInfo.countyOrDistrictId" style="float:left" name="countyOrDistrict">
                    <option *ngFor="let option of countyOrDistrictOptions" [value]="option.id">{{option.name}}</option>
                  </select> -->
                  <input type="text" class="form-control" style="width: 580px;" [(ngModel)]="landScape.address" placeholder="请输入详细地址" name="address">
                </label>
              </div>
            </div>
            <!-- 风景描述 -->
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">备注：</label>
                <label>
                  <input type="text" #remark="ngModel" id="remark" class="form-control" placeholder="请输入备注" onfocus="this.select()" [(ngModel)]="landScape.remark"
                    name="remark" required>
                </label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <!-- [disabled]="!addform.form.valid" -->
          <button type="button" class="btn btn-primary" (click)="doUpdate(editModal)">
            修改
          </button>
          <button type="button" class="btn btn-default" (click)="close(editModal)">
            取消
          </button>
        </div>
      </form>
    </div>
  </div>
</div>